<script setup lang="ts">
import { useRouter } from 'vue-router';
// 定义类型
// interface Customer {
//     name: string;
//     phone: string;
//     email: string;
//     education: string;
//     graduationschool: string;
//     profession: string;
//     profile: string;
// }


const router = useRouter()

const add = async () => {

    // await axios.delete('http://localhost:3000/users/' + route.params.id)
    // // 页面跳转
    router.push({path:"/friends",query:{alert:'用户信息删除成功'}})

}


</script>



<template>
    <div class="container">
        <h1 class="page-headre">
            <router-link to="/friends" style="font-size: 1rem;">取消</router-link>
            <span style="float:right">
                <button class="btn" @click="add()">发表</button>
            </span>
        </h1>
        <div class="two">
            <textarea name="" id="" cols="40" rows="4" placeholder="这一刻的想法..."></textarea>
            <div class="pic">
                <img src="../assets/bg.jpg" alt="..." />
                <div class="add">
                    <i class="bi bi-plus"></i>
                </div>
            </div>
        </div>
        <div class="three">
            <ul class="list-group list-group-flush">
                <li class="list-group-item"></li>
                <li class="list-group-item">
                    <i class="bi bi-geo-alt"></i>
                    &nbsp;&nbsp;所在位置
                    <i class="bi bi-chevron-right"></i>
                </li>
                <li class="list-group-item">
                    <i class="bi bi-at"></i>
                    &nbsp;&nbsp;提醒谁看
                    <i class="bi bi-chevron-right"></i>
                </li>
                <li class="list-group-item">
                    <i class="bi bi-person"></i>
                    &nbsp;&nbsp;谁可以看
                    <i class="bi bi-chevron-right"></i>
                </li>
                <li class="list-group-item" style="color: #1a73e8;">上次分组：朋友</li>
            </ul>
        </div>
    </div>

</template>
<style scoped lang="scss">
.container {
    padding: 1rem;
    font-size: 15px;


    .btn {
        background-color: #58be6b;
        color: #fff;
    }

    .two {
        textarea {
            border: none;
            outline: none;
            box-shadow: none;
        }

        .pic {
            display: flex;
            flex-wrap: wrap;

            img {
                width: 100px;
                height: 100px;
                // margin-right: 5px;
                margin-bottom: 5px;
            }

            .add {
                width: 100px;
                height: 100px;
                background-color: #f0f0f0;
                font-size: 50px;
                text-align: center;
                line-height: 100px;
            }
        }

    }

    .three {
        margin-top: 100px;

        .bi-at,
        .bi-person,
        .bi-geo-alt {
            font-size: 20px;
            position: absolute;
            left: 0;
            line-height: 20px;

        }

        .bi {
            position: absolute;
            right: 0;
        }
    }
}

a {
    color: black;
    text-decoration: none;
}
</style>